<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<style type="text/css">
/* vue 斗篷样式 */
[v-cloak]{
	display: none;
}


</style>

<script type="text/javascript" src="https://lib.baomitu.com/vue/2.6.12/vue.min.js"></script>
</head>
<body>
<!-- v-cloak 对未编译的Mustache标签进行样式定义  -->
<div id="app" v-cloak>
	<h1>{{name}} : {{age}}岁</h1>
	
	<p v-text="name + ' : ' + age + '岁'"></p><!-- dom元素  . innerText -->
	<p v-html="a"></p> <!-- dom元素  . innerHTML -->
	
	<!-- 用于显示原本的Mustache语法，也就是不解析vue的胡子语法。 -->
	<p v-pre>{{name}} : {{age}}岁</p>  <!-- <pre> -->
		<p>你好                                中国</p>
		<pre>你好                                中国</pre>
		
	<!-- 该指令表示元素和组件，只渲染一次不会随着数据改变 -->
	<p v-once>{{name}} : {{age}}岁</p>
		
	<img v-bind:src="path"/>
	<!-- 语法糖 -->
	<img :src="path"/>
	
	<h1>计算属性</h1>
	姓名 fullName：<span>{{fullName}}</span> <br>
	
	姓名 myName：<span>{{myName}}</span> 
		<input v-model:value="myName">
	
	<br>
	
	
	
	
</div>

<script type="text/javascript">

window.setTimeout(function(){
	var v = new Vue({
		el : "#app",
		data : { 
			name : "Vue",
			age : 18,
			a : "<a href='http://taobao.com'>淘宝</a>",
			path : "../image/12.JPG",
			
			firstName : "张",
			lastName : "三",
		},
		// 计算属性
		computed : {
			// 格式1 只读
			fullName() {
				return this.firstName + this.lastName;
			},
			// 格式2 可读写
			myName : {
				get(){
					return this.firstName + this.lastName;
				},
				set(name){
					this.firstName = name.substring(0,1);
					this.lastName = name.substring(1);
				}
				
			}
		}
	});

}, 0)



</script>




</body>
</html>